import { useSearchParams } from 'react-router-dom'
import dayjs from 'dayjs'
import styles from '../css/detail.module.css'

function TicketCard(props) {
  const [sp] = useSearchParams()
  const dtLeft = dayjs(sp.get('date')).format('M月D日 ddd')
  const dtRight = dayjs(sp.get('date')).add(1, 'day').format('M月D日 ddd')

  return (
    <div className={styles.ticketCardBox}>
      <span>{props.startStation}</span>
      <span>{props.trainNo}</span>
      <span>{props.endStation}</span>

      <span>{props.startTime}</span>
      <span>
        <svg
          className="icon"
          aria-hidden="true"
        >
          <use xlinkHref="#icon-gaotie"></use>
        </svg>
      </span>
      <span>{props.endTime}</span>

      <span>{dtLeft}</span>
      <span>耗时 {props.timeTaken}</span>
      <span>{props.isNextDay ? dtRight : dtLeft}</span>
    </div>
  )
}

export default TicketCard
